<template>

  <el-card>

    <!--头部-->
    <div style="min-height: 220px; margin-bottom: 5px">
      <el-row>
        <el-col :span="24">

          <div class="box-content" >

            <!-- 图片 + 文字的 flex 容器 -->
            <div class="" style="display: flex; gap: 10px; align-items: flex-start;">
              <!--图片-->
              <div>
                <el-image class="component-ico" fit="contain" :src="app.icoUrl || getDefaultIcon(app.type)" />
              </div>

              <!--图片左边的文字-->
              <div >

                <div style="display: flex; gap: 10px; align-items: center; min-width: 500px">
                  <h2>{{ app.name }}</h2>

                  <el-tag size="mini" type="warning" v-if="app.state === 1">立项</el-tag>
                  <el-tag size="mini" v-else-if="app.state === 2">开发</el-tag>
                  <el-tag size="mini" type="success" v-else-if="app.state === 4">维护</el-tag>
                  <el-tag size="mini" type="info" v-else-if="app.state === 99">废弃</el-tag>
                </div>



                <el-row >
                  <el-col :span="12">
                    项目类型：
                    <el-tag size="mini" v-if="app.type === 1">app</el-tag>
                    <el-tag size="mini" type="warning" v-else-if="app.type === 2">前端</el-tag>
                    <el-tag size="mini" type="success" v-else-if="app.type === 3">后端</el-tag>
                    <el-tag size="mini" type="danger" v-else-if="app.type === 4">小程序</el-tag>
                  </el-col>
                  <el-col :span="12">
                    是否公用：
                    <el-tag size="mini" type="danger" v-if="app.common === 1">公共应用</el-tag>
                    <el-tag size="mini" type="info" v-else-if="app.common === 0">非公共应用</el-tag>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 10px">
                  <el-col :span="12">
                    重要等级：
                    <el-tag size="mini" type="info" v-if="app.importance === 1">辅助应用</el-tag>
                    <el-tag size="mini" type="success" v-else-if="app.importance === 2">普通应用</el-tag>
                    <el-tag size="mini" type="warning" v-else-if="app.importance === 3">重点应用</el-tag>
                    <el-tag size="mini" type="danger" v-else-if="app.importance === 4">核心应用</el-tag>
                  </el-col>
                  <el-col :span="12">
                    微服务：
                    <el-tag size="mini" type="warning" v-if="app.microservices === 1">微服务系统</el-tag>
                    <el-tag size="mini" type="info" v-else-if="app.microservices === 0">非微服务</el-tag>
                  </el-col>
                </el-row>

              </div>

              <!--操作按钮-->
              <!--<div style="margin-left: auto; display: flex; gap: 10px;">-->
              <!--  <el-button @click="openUpdBefore(site)" type="warning" :size="layoutCss.size">编辑</el-button>-->
              <!--  <el-button @click="delTips(site)" type="danger" :size="layoutCss.size">删除</el-button>-->
              <!--</div>-->

            </div>

            <p style="margin-top: 10px; margin-bottom: 10px;">简介：</p>
            <p class="description">{{ app.briefIntroduction }}</p>
          </div>

        </el-col>
      </el-row>

      <!--分割线-->
      <el-divider></el-divider>
    </div>








    <!--中间部分-->
    <el-row :gutter="10">


      <!--中间左边-->
      <el-col :span="14">

        <el-tabs v-model="elTab.activeName" type="card" @tab-click="handleTabClick" style="min-height: 500px; max-height: 500px; ">
          <el-tab-pane label="分支" name="branch">
            <AppBranchList ref="AppBranchListRef"/>
          </el-tab-pane>


          <el-tab-pane label="基础信息" name="home">
            <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>

              <el-descriptions-item label="开发语言">
                <span>{{app.language}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="运行环境">
                <span>{{app.osStr}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="分布式系统">
                <el-tag size="mini" type="warning" v-if="app.distributed === 1">分布式系统</el-tag>
                <el-tag size="mini" type="info" v-else-if="app.distributed === 0">非分布式</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="启动时间">{{app.openTime}}</el-descriptions-item>

            </el-descriptions>

            <el-descriptions class="margin-top" title=""  :column="1" :size="size" :contentStyle="CS" :label-style="LS" border>
              <el-descriptions-item label="负责人姓名">{{app.directorName}}</el-descriptions-item>
              <el-descriptions-item label="表结构路径">{{app.tableUrl}}</el-descriptions-item>
              <el-descriptions-item label="仓库地址">{{app.git}}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>


          <el-tab-pane label="安装部署" name="install">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">安装部署</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="app.installDoc" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>


        </el-tabs>

      </el-col>



      <!--中间右边，文件树-->
      <el-col :span="10">
        <OpsCommonUseList ref="OpsCommonUseListRef" bind-type="app" :bind-id="this.$route.query.appId"/>
      </el-col>

    </el-row>




  </el-card>

</template>

<script>

import http from '@/utils/http'
import AppBranchList from './AppBranchList.vue'
import OpsCommonUseList from "../common/OpsCommonUseList.vue";

export default {
  name: "AppLayout",
  components: {
    AppBranchList,
    OpsCommonUseList,
  },
  data() {
    return {
      // 应用
      app: {},
      layoutCss :{
        size: 'mini',
      },
      // 标签页信息
      elTab:{
        // 被选中的标签
        activeName: 'branch',
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
    }
  },
  methods: {
    /**
     * 获取默认的图标
     * @param type
     * @returns {*}
     */
    getDefaultIcon(type) {
      switch(type) {
        case 1:
          return require('@/assets/images/ico/app3.png');
        case 2:
          return require('@/assets/images/ico/web.png');
        case 3:
          return require('@/assets/images/ico/java.png');
        case 4:
          return require('@/assets/images/ico/smallProgram.png');
        default:
          return require('@/assets/images/ico/app2.png');
      }
    },
    /**
     * 标签页被点击的时候
     * @param tab
     * @param event
     */
    handleTabClick(tab, event){
      console.log(this.elTab.activeName)
    },
    /**
     * 查询出应用信息
     */
    getAppById() {
      let query = {
        current: 1,
        size: 1,
        id: this.$route.query.appId,
      }

      http.post("/opsApp/getOpsAppPageList", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        if (data.records){
          this.app = data.records[0]
          this.getImageUrlInfo(this.app)
        }

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 渲染图片
     * 只能这样做，图片这里不支持非固定地址返回
     * @param item
     */
    getImageUrlInfo(item) {
      if (!item || !item.ico || item.ico === 'null') {
        // 判空或无效，直接显示默认图
        this.$set(item, 'icoUrl', null);
        return;
      }

      http.getImageUrl(item.ico)
        .then(url => {
          // 异步赋值，触发响应式更新
          this.$set(item, 'icoUrl', url);
        })
        .catch(() => {
          // 下载失败 fallback 默认图
          this.$set(item, 'icoUrl', null);
        });
    },
  },

  mounted() {
    this.getAppById()
    this.$store.commit('navigationListChange', [
      {name: '应用列表', url: '/toAppList', query: {}},
      {name: '应用详情', url: '/toAppLayout', query: {appId: this.$route.query.appId}},
    ])
  },
}
</script>

<style scoped>

.component-ico {
  width: 126px;
  height: 110px;
}

.box-content .description {
  margin-top: 0px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical;
  cursor: pointer;
}


</style>
